<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #div1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #div1 img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<form action="loginAction.php" method="post" enctype="multipart/form-data">
    <div id="div1" onmouseenter="UUU();" onmouseleave="OOO();" onclick="TTT();">
        <img src="img/01.webp" id="showImg">
    </div>更改头像<input type="file"  name="file" id="file" multiple="multiple"  ><br/>
    姓名<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    特长<br/>
    <select name="" style="width: 600px;height: 30px;">
        <option value=""></option>
        <option value="">Java</option>
        <option value="">PHP</option>
        <option value="">HTML</option>
    </select><br/>
    性别<br/><input type="radio" name="sex" id="sex" value=""/>男<input type="radio" name="sex" id="sex" value=""/>女<br/>
    公司<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    职务<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    微信<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    QQ<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    领英<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    微博<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    博客<br/><input type="" name="" id="" value="" style="width: 600px;height: 30px;"/><br/>
    所在地<br/>
    <select name="" id="provinceId" onchange="SelectProvince();" style="width: 300px;height: 30px;">
        <!-- <option value="">请选择省份</option> -->
    </select>
    <select name="" id="cityId" onchange="SelectCity();" style="width: 300px;height: 30px;">
        <option value="-1">请选择城市</option>
    </select><br/>
    自我介绍<br/><textarea rows="8" cols="85"></textarea><br/>
    <button type="button">更新</button>
</form>
</body>
<script type="text/javascript">
    var fileObj =document.getElementById('file');
    function showImg() {
        var files = fileObj['flies'];
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(files[0]);
        document.getElementById('showImg').src = `<img src="img/imgURL" id="showImg">`;
    }
    function TTT() {
        document.getElementById('div1').innerHTML = `<input type="file"  name="file" id="file" multiple="multiple"  >`;
    }
    function UUU() {
        document.getElementById('div1').innerHTML = `<label id='lab_oo'>更改头像</label>`;
    }

    function OOO() {
        document.getElementById('div1').innerHTML = `<img src="img/01.webp">`;
    }
    var provinces = ['北京市', '上海市', '福建省', '广东省', '浙江省'];
    var citys = [
        ['海淀区', '朝阳区'],
        ['浦东', '浦西'],
        ['福州市', '厦门市', '龙岩市', '泉州市'],
        ['广州市', '深圳市', '佛山市'],
        ['杭州市', '温州市', '义乌市']
    ];
    function SelectProvince() {
        var provinceIdObj = document.getElementById('provinceId');
        var proinceIndex = provinceIdObj.value;
        var cityIdObj = document.getElementById('cityId');
        cityIdObj.innerHTML = `<option value="-1">请选择城市</option>`;
        if (proinceIndex != -1) {
            var CurrentCitys = citys[proinceIndex];
            for (var i = 0; i < CurrentCitys.length; i++) {
                cityIdObj.innerHTML += `<option value="` + i + `">` + CurrentCitys[i] + `</option>`;
            }
        }
    }
    function SelectCity() {
        var provinceIdObj = document.getElementById('provinceId');
        var cityIdObj = document.getElementById('cityId');
        var provinceName = provinces[provinceIdObj.value];
        if (cityIdObj.value == -1) {
            return;
        }
        var cityName = citys[provinceIdObj.value][cityIdObj.value];

        document.getElementById('selectedAddr').innerText = provinceName + ":" + cityName
    }

    onload = function () {
        console.log(fileObj);
        fileObj.onchange = showImg();
        var provinceIdObj = document.getElementById('provinceId');
        provinceIdObj.innerHTML = `<option value="-1">请选择省份</option>`;
        for (var i = 0; i < provinces.length; i++) {
            provinceIdObj.innerHTML += `<option value="` + i + `">` + provinces[i] + `</option>`;
        }
    }

</script>
</html>
